<template>
  <div class="page">
    <h1 style="margin-left:120px">欢迎来到个人中心</h1>
    <div class="vide">
      <span>投稿视频</span>
      <el-button
        type="primary"
        @click="dialogFormVisible=true"
        style="float:right;padding: 10px;"
        class="el-icon-video-camera"
      >发布视频</el-button>
    </div>
    <el-dialog
      title="发布视频"
      :visible.sync="dialogFormVisible"
      width="600px"
      style="text-align:center"
    >
      <el-form
        :model="pojo"
        :rules="rules"
        ref="pojoForm"
        label-width="100px"
        label-position="right"
        style="width:480px"

      >
        <el-form-item label="视频名称" prop="name">
          <el-input v-model="pojo.name"></el-input>
        </el-form-item>
        <!-- <el-form-item label="缩略图" prop="thumnail">
          <el-input v-model="pojo.thumnail"></el-input>
        </el-form-item> -->
        <el-form-item label="缩略图路径" prop="thumbnailUrl">
          <el-input v-model="pojo.thumbnailUrl"></el-input>
        </el-form-item>
        <el-form-item label="视频分类" prop="category">
          <el-select v-model="pojo.category.id" style="width:380px" clearable placeholder="请选择">
            <el-option
                v-for="list in Lists"
                :key="list.id"
                :label="list.name"
                :value="list.id"
              >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="视频简介" prop="introduction">
          <el-input v-model="pojo.introduction" type="textarea"></el-input>
        </el-form-item>
              <el-form-item label="添加视频" class="video-upload">
        <el-upload
               class='ensure ensureButt'
               :action="importFileUrl"
               :data="pojo"
               accept=".mp4"
               name="file"
               :on-error="uploadError"
               :on-success="uploadSuccess"
               :before-upload="beforeUploadVideo"
               >
               <el-button size="small" type="primary">选择视频</el-button>
        </el-upload>
      </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false" style="float:left">取 消</el-button>
        <el-button type="primary" @click="addVideo('pojoForm')">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import videoApi from "@/api/video";
import categoryApi from  "@/api/category";
export default {
  data() {
    return {


      Lists: [],
      dialogFormVisible: false,
      pojo: {
        name:"",
        introduction:"",
        category:{
          id:'',
          name:'',
        },
        thumbnailUrl:"",
        url:''
      },
      rules: {
        name: [{ required: true, message: "名称不能为空", trigger: "blur" }]
      },
    importFileUrl: 'http://localhost:8080/video/upload',

    };
  },
  created(){
    this.fetchData();
  },
  methods: {
     fetchData() {
            categoryApi.list().then(response => {
                const res = response.data;
                this.Lists = res.data.list;
            });
        },
    addVideo(pojoName) {
      this.$refs[pojoName].validate(valid => {
        if (valid) {
          console.log(this.pojo);
          videoApi.add(this.pojo).then(response => {
            const resp = response.data;
            if (resp.flag) {
              this.dialogFormVisible = false; //关闭窗口
            } else {
              this.$message({
                message: resp.message,
                type: "warning"
              });
            }
          });
        } else {
          return false;
        }
      });
    },
// 上传成功后的回调
    uploadSuccess (response, file, fileList) {
      console.log('上传文件', response)
      this.pojo.url = response.data.url;
    },
    // 上传错误
    uploadError (response, file, fileList) {
      console.log('上传失败，请重试！')
    },
   //上传前回调
	beforeUploadVideo (file) {
            const isLt200M = file.size / 1024 / 1024 < 200;
            if (['video/mp4'].indexOf(file.type) == -1) { //'video/ogg', 'video/flv', 'video/avi', 'video/wmv', 'video/rmvb'
                this.$message.error('请上传正确的视频格式');
                return false;
            }
            if (!isLt200M) {
                this.$message.error('上传视频大小不能超过200MB哦!');
                return false;
            }
            this.isShowUploadVideo = false;
        },
  }
};
</script>

<style scoped>
.page {
  position: absolute;
  /* text-align: center; */
}
.vide {
  margin-top: 100px;
}
span {
  float: left;
}
</style>